import { useLocation } from 'react-router-dom'
import { useRouteMatch } from 'react-router-dom'
import { useParams } from 'react-router-dom'
import { useHistory } from 'react-router-dom'
import { Link, Route } from 'react-router-dom'
import { withRouter } from 'react-router-dom'

function renderLocation(location) {
  const query = [...new URLSearchParams(location.search)]

  return (
    <>
      <h3>location</h3>
      <ul>
        <li>pathname: {location.pathname}</li>
        <li>
          search:{' '}
          <ul>
            {query.map(([key, value]) => (
              <li key={key}>
                {key}:{value}
              </li>
            ))}
          </ul>
        </li>
        <li>hash: {location.hash}</li>
        {location.state && (
          <li>
            state:
            <ul>
              {Object.keys(location.state).map((key) => (
                <li key={key}>
                  {key}: {location.state[key]}
                </li>
              ))}
            </ul>
          </li>
        )}
      </ul>
    </>
  )
}

function renderMatch(match) {
  return (
    <>
      <h3>match</h3>
      <ul>
        <li>path: {match.path}</li>
        <li>url: {match.url}</li>
        {match.params && (
          <li>
            params:{' '}
            <ul>
              {Object.keys(match.params).map((key) => (
                <li key={key}>
                  {key}: {match.params[key]}
                </li>
              ))}
            </ul>
          </li>
        )}
        <li>isExact: {match.isExact ? 'true' : 'false'}</li>
      </ul>
    </>
  )
}

function renderHistory(history) {
  return (
    <>
      <h2>history</h2>
      <ul>
        <li>length: {history.length}</li>
        <li>action: {history.action}</li>
      </ul>
    </>
  )
}

const Test1 = ({ location, match, history }) => {
  return (
    <div>
      {renderLocation(location)}
      {renderMatch(match)}
      {renderHistory(history)}
    </div>
  )
}
const useSearch = () => {
  const location = useLocation()
  const query = [...new URLSearchParams(location.search)]
  return query.reduce((acc, [key, value]) => {
    return { ...acc, [key]: value }
  }, {})
}
// a[]=1&a[]=2&b=2
// {a: ['1','2'], b: '2'}

const Test2 = () => {
  const location = useLocation()
  const history = useHistory()
  const match = useRouteMatch()
  const params = useParams()
  const search = useSearch()
  console.log(params, search)
  return (
    <div>
      {renderLocation(location)}
      {renderMatch(match)}
      {renderHistory(history)}
    </div>
  )
}
const RoutesPropsDemo = (props) => {
  // const Test1WithRouter = withRouter(Test1)
  const Test1WithRouter = Test2
  return (
    <>
      <h2>RoutesPropsDemo</h2>
      <div>
        <Link to="/routes-props-demo/test1">地址1</Link> |<Link to="/routes-props-demo/test1?a[]=1&a[]=2&b=2">地址2</Link> | <Link to="/routes-props-demo/test1#a=1&b=2">地址3</Link> |{' '}
        <Link
          to={{
            pathname: '/routes-props-demo/test1',
            state: { username: '张三' },
          }}
        >
          地址4(带state)
        </Link>{' '}
        | <Link to="/routes-props-demo/zhangsan/blogs/880">地址5</Link> |{' '}
      </div>
      <Route path="/routes-props-demo/test1">
        <Test1WithRouter />
      </Route>
      <Route path="/routes-props-demo/:username/blogs/:blogId">
        <Test1WithRouter />
      </Route>
    </>
  )
}

export default RoutesPropsDemo
